<template>
  <div class="dictionaries-box flex flex1 flex-direction">
    <el-tabs
      v-model="activeName"
      @tab-remove="handleClick"
      @tab-click="tabClick"
    >
      <el-tab-pane
        :key="item.scopeName"
        v-for="item in tabList"
        :label="`${item.dictName}`"
        :name="item.scopeName"
        :closable="item.close"
      >
      </el-tab-pane>
    </el-tabs>
    <FirstPage v-if="activeName === '1'" @firstData="firstData"></FirstPage>
    <SecondPage
      :secondData="secondData"
      @seconData="seconData"
      v-else
    ></SecondPage>
  </div>
</template>
<script>
import SecondPage from "./sysDict/secondPage.vue";
import FirstPage from "./sysDict/firstPage.vue";
export default {
  components: { FirstPage, SecondPage },
  computed: {},
  data() {
    return {
      activeName: "1",
      tabList: [
        {
          scopeName: "1",
          tabName: "字典管理",
          close: false,
          dictName: "字典管理",
          dictType: "",
        },
      ],
      secondData: {
        dictName: "",
        dictType: "",
        lockUpdate: "",
      },
      num: null,
    };
  },

  created() {},
  methods: {
    //切换tabs
    async tabClick(e) {
      this.num = e;
      this.tabList.map((item) => {
        if (item.scopeName === e.name) {
          this.secondData.dictName = item.dictName;
          this.secondData.dictType = item.dictType;
          this.secondData.lockUpdate = item.lockUpdate;
        }
      });
    },
    //删除tabs
    handleClick(e) {
      const num = this.tabList[this.tabList.length - 1].scopeName;
      this.tabList.map((item, index) => {
        if (item.scopeName === e) {
          this.tabList.splice(index, 1);
        }
      });
      this.activeName = this.tabList[this.tabList.length - 1].scopeName;
      this.secondData.dictName = this.tabList[this.tabList.length - 1].dictName;
      this.secondData.dictType = this.tabList[this.tabList.length - 1].dictType;
      this.secondData.lockUpdate =
        this.tabList[this.tabList.length - 1].lockUpdate;
    },
    //接受第一个组件数据
    firstData(data) {
      console.log(data);
      this.secondData.dictName = data.dictName;
      this.secondData.dictType = data.dictType;
      this.secondData.lockUpdate = data.lockUpdate;
      let item = this.tabList.find((item) => {
        return item.dictName === data.dictName;
      });
      if (item === undefined) {
        const num = this.tabList[this.tabList.length - 1].scopeName;
        this.tabList.push({
          scopeName: (parseInt(num) + 1).toString(),
          tabName: "字典数据",
          close: true,
          dictName: data.dictName,
          dictType: data.dictType,
        });
        this.activeName = (parseInt(num) + 1).toString();
        this.num = this.activeName;
      } else {
        this.activeName = item.scopeName;
      }
    },
    seconData(data) {
      const index = typeof this.num === "string" ? this.num : this.num.name;
      this.tabList.map((item) => {
        if (item.scopeName === index) {
          item.type = data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.dictionaries-box {
  padding: 0 20px!important;
      display: flex;
    flex-direction: column;
  .dictionaries-content {
    padding: 0 30px 20px 30px;
    background: #fff;
    margin-top: 14px;
    box-shadow: 0px 8px 14px 0px rgba(219, 224, 240, 0.8);
    box-sizing: border-box;
    height: 100%;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #165dff;
  }

  ::v-deep .el-tabs__item {
    height: 50px;
    line-height: 50px;

    &.is-active,
    &:hover {
      color: #165dff;
    }
  }
}
</style>
